<template>
   <div class="method">
       <p class="p1">解决方案流程示意及特点</p>
       <p class="p2">Solution flow diagram and characteristics</p>
       <img src="@/assets/image/material/method-bg.jpg" alt="">
       <div class="manufacturer">
           <div class="manufacturer-item">
               <p class="manu-p1">原材料厂商</p>
               <p class="manu-p2">快速销货，消化库存</p>
           </div>
           <div class="manufacturer-item">
               <p class="manu-p1">原材料厂商</p>
               <p class="manu-p2">快速销货，消化库存</p>
           </div>
           <div class="manufacturer-item">
               <p class="manu-p1">原材料厂商</p>
               <p class="manu-p2">快速销货，消化库存</p>
           </div>
           <div class="manufacturer-item">
               <p class="manu-p1">原材料厂商</p>
               <p class="manu-p2">快速销货，消化库存</p>
           </div>
       </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scoped lang="less">
.method{
    width: 100%;
    height: 13.1rem;
    position: relative;
    .p1{
        font-size: 0.4rem;
        color: #333333;
       
        text-align: center;
        white-space: nowrap;
        position: absolute;
        top: 0.72rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .p2{
        font-size: 0.24rem;
        transform: scale(5/6);
        color: #777777;
         white-space: nowrap;
        position: absolute;
        top: 1.15rem;
        left: 50%;
        transform: translateX(-50%);
    }
    img{
        position: absolute;
        top: 1.75rem;
        height: 6.75rem;
        width: 100%;
    }
    .manufacturer{
        width:  6.6rem;
        height: 3.5rem;
        position: absolute;
        bottom: 0.73rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        .manufacturer-item{
            width: 3.2rem;
            height: 1.7rem;
            background-color: #051742;
            position: relative;
            .manu-p1{
                font-size: 0.3rem;
                color: #d4aa58;
                position: absolute;
                top: 0.54rem;
                left: 50%;
                transform: translateX(-50%);
            }
            .manu-p2{
                font-size: 0.24rem;
                transform: scale(5/6);
                color: #ffffff;
                white-space: nowrap;
                position: absolute;
                top: 1rem;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}

</style>
